import { fontSize } from "@/utils/px2rem.js";

export const options = {
  // 二审开庭率情况
  caseStatus(jainfo) {
    const data = [
      { name: "裁定数", value: jainfo.cds },
      { name: "调解数", value: jainfo.tjs },
      { name: "判决数", value: jainfo.pjs },
    ];

    let option = {
      color: [
        "#0B7AFA",
        "#FFD565",
        "#1EF5F8",
        "#2BCEA6",
        "#F8A84E",
        "#5D2BCE",
        "#F8764E",
      ],
      tooltip: {
        trigger: "item",
        backgroundColor: "RGBA(16, 50, 112, 0.9)",
        borderColor: "RGBA(5, 160, 243, 0.6)",
        textStyle: {
          color: "#fff",
          fontSize: fontSize(14),
        },
        extraCssText:
          "width: 128px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
        formatter: function (params) {
          let str =
            (params.data &&
              `<div style="font-weight: bold;">${params.name}</div>
              <div style="display:flex; justify-content: space-between; align-items: center;">
                  <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${params.color}; margin-right: 4px;"></span>占比</span>
                  <span>${params.percent}%</span>
              </div>`) ||
            "";
          return str;
        },
      },
      legend: {
        orient: "vertical",
        left: "76%",
        y: "0",
        itemWidth: fontSize(10),
        itemHeight: fontSize(10),
        itemGap: fontSize(14),
        align: "left",
        textStyle: {
          fontSize: fontSize(14),
          color: "#A2E7FF",
          rich: {
            name: {
              fontSize: fontSize(14),
              color: "#A2E7FF",
            },
            value: {
              fontSize: fontSize(14),
              padding: [0, fontSize(5), 0, fontSize(5)],
              color: "#D0DEEE",
            },
          },
        },
      },
      series: [
        {
          name: "结案情况",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["36%", "50%"],
          roseType: "radius",
          data: data.map((d) => {
            d = Object.assign(d, {
              label: {
                // show: d.value >= 30,
                show: true,
                normal: {
                  formatter: function (params) {
                    var result = "";
                    if (params.name) {
                      result +=
                        "{blue|" +
                        params.name +
                        "\n" +
                        "案件数：" +
                        params.value +
                        "\n" +
                        "占比：" +
                        params.percent +
                        "%" +
                        "}";
                    }
                    return result;
                  },
                  padding: [-fontSize(30), -fontSize(50), 0, fontSize(-30)],
                  height: 10,
                  rich: {
                    blue: {
                      fontSize: fontSize(13),
                      lineHeight: fontSize(22),
                      color: "#fff",
                      align: "left",
                    },
                  },
                },
              },
              labelLine: {
                show: true,
                length: fontSize(12),
                length2: fontSize(24),
                width: fontSize(2),
                lineStyle: {
                  type: "solid",
                },
              },
              emphasis: {
                labelLine: {
                  show: d.value >= 50,
                },
              },
            });
            return d;
          }),
        },
      ],
    };
    return option;
  },

  SecondTrialOpeningRate(sqData) {
    const data = [
      { name: "诉前调解案件数", value: sqData.tjjas },
      { name: "诉前调解成功数", value: sqData.tjcgs },
    ];
    let option = {
      color: ["#0B7AFA", "#FFD565"],
      title: [
        {
          text: "诉前调解成功率：" + sqData.tjcgl,
          left: "center",
          bottom: 5,
          textStyle: {
            fontFamily: "MicrosoftYaHei",
            fontSize: fontSize(18),
            color: "#58CAFC",
          },
        },
      ],
      series: [
        {
          name: "结案情况",
          type: "pie",
          radius: "60%",
          startAngle: 360,
          center: ["50%", "46%"],
          label: {
            show: true,
            normal: {
              alignTo: "edge",
              edgeDistance: "16%",
              formatter: function (params) {
                var result = "";
                result += "{blue|" + params.name + "\n" + params.value + "}";
                return result;
              },
              padding: [-fontSize(30), -fontSize(60), 0, -fontSize(20)],
              height: 10,
              rich: {
                blue: {
                  fontSize: fontSize(14),
                  lineHeight: fontSize(22),
                  color: "#fff",
                  align: "left",
                },
              },
            },
          },
          labelLine: {
            show: true,
            length: fontSize(6),
            length2: fontSize(6),
            width: fontSize(2),
            lineStyle: {
              type: "solid",
            },
          },
          data: data,
        },
      ],
    };
    return option;
  },

  // 已结/未结
  ThirdTrialOpeningRate(data) {
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
        backgroundColor: "RGBA(16, 50, 112, 0.9)",
        borderColor: "RGBA(5, 160, 243, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
        formatter: function (params) {
          let str = `${params[0].name}<br />`;
          if (params[0]) {
            str += `${params[0]?.seriesName}：${params[0]?.value}%<br />`;
          }
          if (params[1]) {
            str += `${params[1]?.seriesName}：${params[1]?.value}%<br />`;
          }
          return str;
        },
      },
      grid: {
        top: fontSize(40),
        bottom: fontSize(16),
        left: fontSize(2),
        right: fontSize(2),
        containLabel: true,
      },
      legend: {
        right: 0,
        textStyle: {
          color: "#A2E7FF",
          fontSize: fontSize(14),
        },
        icon: "rect",
        itemWidth: fontSize(18),
        itemHeight: fontSize(7),
      },
      xAxis: {
        data: data
          .filter((item) => item.ajlx === "民初")
          .map((item) => item.yf),
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#3F5C8E",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
      },
      yAxis: [
        {
          type: "value",
          name: "",
          splitLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#3F5C8E",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#D0DEEE",
            fontSize: fontSize(12),
            formatter(value) {
              return value + "%";
            },
          },
        },
      ],
      series: [
        {
          name: "民初",
          type: "bar",
          barWidth: fontSize(7),
          itemStyle: {
            barBorderRadius: [
              fontSize(7),
              fontSize(7),
              fontSize(7),
              fontSize(7),
            ],
            color: {
              type: "linear",
              x: 0, // 右
              y: 1, // 下
              x2: 0, // 左
              y2: 0, // 上
              colorStops: [
                {
                  offset: 0,
                  color: "#79F4C7",
                },
                {
                  offset: 1,
                  color: "#0AAB15",
                },
              ],
            },
          },

          data: data
            .filter((item) => item.ajlx === "民初")
            .map((item) => ((item.jas / item.las) * 100).toFixed(2)),
        },
        {
          name: "诉前调",
          type: "bar",
          barWidth: fontSize(7),
          itemStyle: {
            barBorderRadius: [
              fontSize(7),
              fontSize(7),
              fontSize(7),
              fontSize(7),
            ],
            color: {
              type: "linear",
              x: 0, // 右
              y: 1, // 下
              x2: 0, // 左
              y2: 0, // 上
              colorStops: [
                {
                  offset: 0,
                  color: "#3A75F5",
                },
                {
                  offset: 1,
                  color: "#1EF4F8",
                },
              ],
            },
          },
          data: data
            .filter((item) => item.ajlx === "诉前调")
            .map((item) => ((item.jas / item.las) * 100).toFixed(2)),
        },
      ],
    };
    return option;
  },
  //   结案率
  CaseRate(data, startMonth) {
    let arr = [];
    for (let key in data) {
      arr.push({
        key: key.replace("jal", ""),
        value: data[key],
      });
    }
    let items = arr
      .sort((a, b) => a.key - b.key)
      .map((item, i) => {
        let m = i + startMonth * 1;
        if (m > 12) {
          m = m - 12;
        }
        return {
          name: m + "月",
          value: item.value.replace("%", ""),
        };
      });
    let xAxisData = items.map((item) => item.name);
    let yData = items.map((item) => item.value);
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
        backgroundColor: "RGBA(16, 50, 112, 0.9)",
        borderColor: "RGBA(5, 160, 243, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
        formatter(params) {
          return `${params[0].name} <br/> 
                   ${params[0].seriesName}：${params[0].value}%`;
        },
      },
      grid: {
        top: fontSize(40),
        bottom: fontSize(16),
        left: fontSize(2),
        right: fontSize(2),
        containLabel: true,
      },
      legend: {
        data: ["结案率"],
        right: 0,
        textStyle: {
          color: "#A2E7FF",
          fontSize: fontSize(14),
        },
        icon: "rect",
        itemWidth: fontSize(18),
        itemHeight: fontSize(7),
      },
      xAxis: {
        data: xAxisData,
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#3F5C8E",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
      },
      yAxis: [
        {
          type: "value",
          name: "",
          max: 100,
          splitLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#3F5C8E",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#D0DEEE",
            fontSize: fontSize(12),
            formatter(value) {
              console.log(111, value);
              return value + "%";
            },
          },
        },
      ],
      series: [
        {
          name: "结案率",
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          lineStyle: {
            normal: {
              width: fontSize(2),
              color: "#F29226",
            },
          },
          itemStyle: {
            normal: {
              color: "#F29226",
              borderColor: "#000C3B", //拐点边框颜色
              borderWidth: fontSize(1),
            },
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(242, 146, 38, 0.3)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(242, 146, 38, 0.01)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          symbolSize: fontSize(8),
          data: yData,
        },
      ],
    };
    return option;
  },
};
